<template>
  <div class="work_station">
    <van-nav-bar
      title="政务办事"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="swipe-style">
      <van-swipe :autoplay="3000" indicator-color="#DC4630">
        <van-swipe-item v-for="image in images" :key="image.id">
          <img v-lazy="image.imageUrl" :key="image.imageUrl"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :gutter="10" :border="false" :column-num="4">
      <van-grid-item
        v-for="item in propertyServiceList"
        :key="item.text"
        @click="menuClick(item)"
      >
        <svg-icon
          :icon-class="item.icon"
          widthW="1.3rem"
          heightH="1.3rem"
        ></svg-icon>
        <span class="function_text">{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
    <div class="dynamic-style">
      <p class="dynamic-title-style">
        热点资讯<span v-show="isShowMore" @click="more()">更多</span>
      </p>
      <ul class="dynamic_content_list">
        <li
          v-for="option in dynamicShowList"
          :key="option.id"
          @click="routerChange(option)"
        >
          <div class="content_text">
            <p class="content_title">{{ option.subject }}</p>
            <p class="content_time">{{ option.creationDate }}</p>
          </div>
          <img v-lazy="option.headImage" :key="option.headImage"/>
        </li>
      </ul>
    </div>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      showLoading: false,
      images: [],
      propertyServiceList: [
        {
          text: "服务指南",
          path: "/work/serviceInfo",
          icon: "服务指南"
        },
        {
          icon: "在线办事",
          path: "/work/onlineService",
          text: "在线办事"
        },
        {
          icon: "办件进度",
          path: "/work/workSchedule",
          text: "办件进度"
        },
        {
          icon: "办事预约",
          path: "/work/basicFacts",
          text: "办事预约"
        }
      ],
      dynamicList: [],
      curPage: 1,
      pageSize: 10
    };
  },
  computed: {
    isShowMore() {
      return this.dynamicList.length > 4 ? true : true;
    },
    dynamicShowList() {
      return this.dynamicList.slice(0, 4);
    }
  },
  mounted() {
    this.getList();
    this.getBannerList();
  },
  methods: {
    getBannerList() {
      this.showLoading = true;
      api
        .affair_banner_v1_list_front(1, 5)
        .then(res => {
          if (res.code === "0") {
            if (!res.datas.records.length) {
              this.images.push({imageUrl: require('@/assets/err.png')})
              return;
            }
            this.images = res.datas.records;
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    getList() {
      api.hot_information_entity_page(this.curPage, this.pageSize).then(res => {
        if (res.code === "0") {
          if (
            (res.datas && res.datas.records.length === 0) ||
            res.datas === null
          ) {
            this.$toast("暂无热点资讯");
            return;
          }
          this.dynamicList = res.datas.records;
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    menuClick(item) {
      if (item.text == "办事预约") {
        this.$toast("正在开发中，敬请期待。。。");
        return;
      }
      this.$router.push(item.path);
    },
    routerChange(val) {
      this.$router.push({
        name: "hotInformationDetails",
        query: { id: val.id }
      });
    },
    more() {
      this.$router.push("/home/DynamicMore");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../workstation/styles/workstation.scss";

.work_station {
  background: #ffffff;

  .swipe-style {
    margin-top: 17px;
    border-radius: 10px;

    img {
      width: 375px;
      height: 160px;
      // border-radius: 10px;
    }
  }
  .dynamic_content_list {
    padding: 15px 15px 0;
    li {
      width: 345px;
      display: flex;
      flex-wrap: wrap;
      padding: 15px 0;
      border-bottom: 1px solid #e2e2e2;
      .content_text {
        width: 245px;
      }
      img {
        float: right;
        height: 80px;
        width: 100px;
        border-radius: 5px;
      }
      .content_title {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
      .content_time {
        font-size: 12px;
        color: #999999;
        line-height: 16.5px;
        margin-top: 39px;
      }
    }
    li:last-child {
      border-bottom: none;
    }
    li:first-child {
      padding-top: 0;
    }
  }

  .dynamic-style {
    margin-top: 10px;
    background: #ffffff;

    .van-tab {
      border-bottom: 1px solid #e2e2e2;
    }

    .dynamic-title-style {
      padding: 10px 0 9.5px 15px;
      font-size: 18px;
      color: #333333;
      border-bottom: 1px solid #e2e2e2;

      span {
        font-size: 14px;
        line-height: 20px;
        color: #999999;
        margin-right: 15px;
        float: right;
      }
    }
  }
}
</style>
